Внешние файлы js не работают внутри компонентов angular 2

ProgramBox

Внешние файлы js не работают внутри компонентов angular 2

Post author:admin
Запись опубликована:28 февраля, 2023
Post category:Вопросы по программированию

#javascript #node.js #angular #typescript

Вопрос:

Я работаю с шаблоном администратора altair. Пытаюсь преобразовать его в angular2 spa.
Я использую пакет angular-seed от mgechev.
angular-seed от mgechev

Моя файловая структура. Нажмите здесь, чтобы просмотреть изображение

Вот мой index.html

 <!DOCTYPE html>
<html  lang="en" class="app_theme_g">
<head>
  <base href="<%= APP_BASE %>">
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Remove Tap Highlight on Windows Phone IE -->
  <meta name="msapplication-tap-highlight" content="no"/>

  <link rel="icon" type="image/png" href="assets/admin/assets/img/favicon-16x16.png" sizes="16x16">
  <link rel="icon" type="image/png" href="assets/admin/assets/img/favicon-32x32.png" sizes="32x32">

  <!--Title-->
  <title>Resurgent</title>

  <!-- uikit -->
  <link rel="stylesheet" href="assets/admin/uikit/css/uikit.almost-flat.min.css" media="all">
  <!--Login page-->
  <link rel="stylesheet" href="assets/admin/css/login_page.min.css" />
  <!-- flag icons -->
  <link rel="stylesheet" href="assets/admin/icons/flags/flags.min.css" media="all">
  <!-- style switcher -->
  <link rel="stylesheet" href="assets/admin/css/style_switcher.min.css" media="all">
  <!-- altair admin -->
  <link rel="stylesheet" href="assets/admin/css/main.min.css" media="all">
  <!-- themes -->
  <link rel="stylesheet" href="assets/admin/css/themes/themes_combined.min.css" media="all">
  <!-- matchMedia polyfill for testing media queries in JS -->
  <!--[if lte IE 9]>
  <script type="text/javascript" src="assets/admin/matchMedia/matchMedia.js"></script>
  <script type="text/javascript" src="assets/admin/matchMedia/matchMedia.addListener.js"></script>
  <link rel="stylesheet" href="assets/admin/css/ie.css" media="all">
  <![endif]-->

  <!--Loading Animation-->
  <link rel="stylesheet" href="assets/loader.css">

  <!-- inject:css -->
  <!-- endinject -->
</head>
<body>

  <app-root>
    <div class="spinner">
      <div class="rect1"></div>
      <div class="rect2"></div>
      <div class="rect3"></div>
      <div class="rect4"></div>
      <div class="rect5"></div>
    </div>
  </app-root>

  <!-- google web fonts -->
  <script>
    WebFontConfig = {
      google: {
        families: [
          'Source Code Pro:400,700:latin',
          'Roboto:400,300,500,700,400italic:latin'
        ]
      }
    };
    (function() {
      var wf = document.createElement('script');
      wf.src = ('https:' == document.location.protocol ? 'https' : 'http')  
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
      wf.type = 'text/javascript';
      wf.async = 'true';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(wf, s);
    })();
  </script>

  <!-- common functions -->
  <script src="assets/admin/js/common.min.js"></script>
  <!-- altair login page functions -->
  <script src="assets/admin/js/pages/login.min.js"></script>
  <!-- uikit functions -->
  <script src="assets/admin/js/uikit_custom.min.js"></script>
  <!-- altair common functions/helpers -->
  <script src="assets/admin/js/altair_admin_common.min.js"></script>


  <!--Seed Project Scripts-->
  <script>
    // Fixes undefined module function in SystemJS bundle
    function module() {}
  </script>

  <!-- shims:js -->
  <!-- endinject -->

  <% if (ENV === 'dev') { %>
  <script src="<%= APP_BASE %>app/system-config.js"></script>
  <% } %>

  <!-- libs:js -->
  <!-- endinject -->

  <!-- inject:js -->
  <!-- endinject -->

  <% if (ENV === 'dev') { %>
  <script>
  System.import('<%= BOOTSTRAP_MODULE %>')
    .catch(function (e) {
      console.error(e,'Report this error at https://github.com/mgechev/angular2-seed/issues');
    });
  </script>
  <% } %>

</body>
</html>

app.module.ts

 import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from "@angular/router";

import { AuthComponent } from "./auth.component";
import { LoginComponent } from "./login/login.component";
import { SignupComponent } from "./signup/signup.component";

@NgModule({
  imports: [
    CommonModule,
    RouterModule
  ],
  declarations: [
    AuthComponent,
    LoginComponent,
    SignupComponent
  ],
  exports: [
    AuthComponent,
    LoginComponent,
    SignupComponent
  ],
  providers: []
})
export class AuthModule { }

app.component.ts

 import { Component, OnInit } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'auth',
  templateUrl: 'auth.component.html',
  styleUrls: ['auth.component.css'],
})

export class AuthComponent implements OnInit {

  title: string = "hello";

  ngOnInit() { }

}

Expand snippet

Auth module:

auth.module.ts

 import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from "@angular/router";

import { AuthComponent } from "./auth.component";
import { LoginComponent } from "./login/login.component";
import { SignupComponent } from "./signup/signup.component";

@NgModule({
  imports: [
    CommonModule,
    RouterModule
  ],
  declarations: [
    AuthComponent,
    LoginComponent,
    SignupComponent
  ],
  exports: [
    AuthComponent,
    LoginComponent,
    SignupComponent
  ],
  providers: []
})
export class AuthModule { }

Expand snippet

auth.component.ts

 import { Component, OnInit } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'auth',
  templateUrl: 'auth.component.html',
  styleUrls: ['auth.component.css'],
})

export class AuthComponent implements OnInit {

  title: string = "hello";

  ngOnInit() { }

}

Expand snippet

 import { Component, OnInit } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'login',
  templateUrl: 'login.component.html',
  styleUrls: ['login.component.css'],
})

export class LoginComponent implements OnInit {

  verticalBlocks: any;

  title: string = "Login";

  ngOnInit() {}

}

 <div class="login_page">
  <div class="login_page_wrapper">
    <div class="md-card" id="login_card">
      <div class="md-card-content large-padding" id="login_form">
        <div class="login_heading">
          <div class="user_avatar"></div>
        </div>
        <form>
          <div class="uk-form-row">
            <label for="login_username">Username</label>
            <input class="md-input" type="text" id="login_username" name="login_username" />
          </div>
          <div class="uk-form-row">
            <label for="login_password">Password</label>
            <input class="md-input" type="password" id="login_password" name="login_username" />
          </div>
          <div class="uk-margin-medium-top">
            <a class="md-btn md-btn-primary md-btn-block md-btn-large">Sign In</a>
          </div>
          <div class="uk-margin-top">
            <a class="uk-float-right">Need help?</a>
            <span class="icheck-inline">
                <input type="checkbox" name="login_page_stay_signed" id="login_page_stay_signed" data-md-icheck />
                <label for="login_page_stay_signed" class="inline-label">Stay signed in</label>
            </span>
          </div>
        </form>
      </div>
    </div>
    <div class="uk-margin-top uk-text-center">
      <a [routerLink]="['/signup']">Create an account</a>
    </div>
  </div>
</div>

Все работает нормально, кроме внешнего js. Javascripts не работают должным образом. Но файлы css работают. Материальные компоненты и модальные функции другие функции javascript ничего не работает внутри файла компонента angular.

Ответ №1:

Если вы хотите использовать материальные компоненты в своем приложении angular2, используйте соответствующую библиотеку, вам необходимо импортировать библиотеки в свой модуль. Смотрите эту ссылку https://github.com/AngularClass/awesome-angular2/blob/gh-pages/README.md Он содержит огромную коллекцию библиотек, которые можно использовать с angular2. Вот начальное ядро, которое интегрировало материал с angular2. https://github.com/DeviantJS/angular2-seed-material2

Вопрос:

Ответ №1:

Вам также может понравиться

Проблема с AWAIT / ASYNC и WebAPI с FOREACH

Используйте DLL в PowerShell

в занимает дополнительное место справа