External js files are not working inside angular 2 components
Question
I'm working with altair admin template. Trying to convert it into an angular2 spa.
I am using mgechev's angular-seed package.
mgechev's angular-seed
My file structure. Click here to view image
Here is my 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() { } }
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 { }
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() { } }
login.component.ts
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() {} }
login.component.html
<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>
Everything is working fine except external js. Javascripts are not working properly. But the css files are working. Material components and modals other javascript functionality nothing is working inside angular component file.
1 answers
solution1
0 2016-10-11 14:37:31
If you want to use material components in your angular2 app, use respective library, you have to import the libraries in your module. See this link https://github.com/AngularClass/awesome-angular2/blob/gh-pages/README.md It contains a huge collection of libraries that can be used with angular2. Here is the seed that integrated material with angular2. https://github.com/DeviantJS/angular2-seed-material2
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
External JS Files Working in Angular 7 But Not in 8
Angular2 Call External JS file Function Inside the Components
Javascript - Working with external JS files
How to use external JS files in Angular 6
How to use external JS file in angular6 components
angular js code not working with external plugin
External JS file click event is not working in angular 8
Calling external js function from Angular 5 not working
Angular 6 external js,css reference not working
Loading 3rd party JS files to angular components files
Related Tags