Upgrading to Angular 2 final version : traceur.js error - node.js

I am facing an issue after upgrading from Angular 2 RC5 to Angular 2 final version (2.1.1). I am using system.js.
My all typescript code was working fine before upgrading and I did not update any of it.
Here is the error I keep getting :
Error: SyntaxError: Unexpected token <
at eval (<anonymous>)
Evaluating http://localhost:8888/traceur.js
Error loading http://localhost:8888/traceur.js
Error loading http://localhost:8888/node_modules/#angular/router/index.js as "#angular/router" from http://localhost:8888/js/typescript/app.module.jsZoneDelegate.invoke
I copied the package.json from Angular 2 docs (https://angular.io/docs/ts/latest/guide/npm-packages.html)
And here is my app.module.ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { routing } from './app.routes';
import { SharedModule } from './shared/shared.module';
import { RouterModule } from '#angular/router';
#NgModule({
imports: [ BrowserModule,
RouterModule,
FormsModule,
HttpModule,
SharedModule,
routing ],
bootstrap: [ AppComponent ],
})
export class AppModule {}
EDIT : Here is my sytemjs.config.js file:
var map = {
'app': 'app', // 'dist',
'angular2': 'node_modules/angular2',
'#angular': 'node_modules/#angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs',
'zone.js': 'node_modules/zone.js',
'ng2-bootstrap': 'node_modules/ng2-bootstrap',
'moment': 'node_modules/moment',
'express': 'node_modules/express'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
'zone.js': { main: 'dist/index.js', defaultExtension: 'js' },
'ng2-bootstrap': { main: 'ng2-bootstrap.js', defaultExtension: 'js' },
'moment': { main: 'moment.js', defaultExtension: 'js' },
'notifications': { main: 'components.js', defaultExtension: 'js' },
'angular2-recaptcha': { defaultExtension: 'js', main:'index' },
'rxjs' : {main: 'Rx'},
'#angular/core' : {main: 'bundles/core.umd.js'},
'#angular/common' : {main: 'bundles/common.umd.js'},
'#angular/upgrade' : {main: 'bundles/upgrade.umd.js'},
'#angular/compiler' : {main: 'bundles/compiler.umd.js'},
'#angular/forms' : {main: 'bundles/forms.umd.js'},
'#angular/router' : {main: 'bundles/router.umd.js'},
'#angular/platform-browser' : {main: 'bundles/platform-browser.umd.js'},
'#angular/platform-browser-dynamic': {main: 'bundles/platform-browser-dynamic.umd.js'},
'#angular/http' : {main: 'bundles/http.umd.min.js'}
};
and my app.routes.ts file:
import { Routes, RouterModule } from '#angular/router';
// Components
import { HomeComponent } from './shared/components/home.component';
import { ClubComponent } from './shared/components/club.component';
import { BusinessPageComponent } from './shared/components/business-page.component';
const appRoutes: Routes = [
// Child routing
{
path: 'profil',
loadChildren: '/js/typescript/profile/profile.module#ProfileModule'
},
{
path: 'recherche',
loadChildren: '/js/typescript/job-search/job-search.module#JobSearchModule'
},
// Business page
{ path: 'etablissement/:businessId', component: BusinessPageComponent },
{ path: 'club/:clubId', component: BusinessPageComponent },
// Root
{ path: '', redirectTo: '/accueil', pathMatch: 'full'},
];
// - Updated Export
export const routing = RouterModule.forRoot(appRoutes, { useHash: true });

Related

Nest.js - Imported service not recognized by another service in production mode

I'm trying to use ModelsService from ModelsModule in AppService from AppModule.
In development mode, everything works ok. But on production mode I'm getting an error:
[Nest] 16460 - 03/13/2021, 11:14:00 PM [ExceptionsHandler] this.modelsService.countOnlineModels is not a function +1136ms
TypeError: this.modelsService.countOnlineModels is not a function
at _.createAppStore (/Users/egor.kamenev/Desktop/camoncam/dist/static/server/serverBundle.js:1:76579)
app.service.tsx
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { createStore, Store } from 'redux';
import { Provider } from 'react-redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import { Inject, Injectable, forwardRef } from '#nestjs/common';
import { ModelsService } from './models/models.service';
import App from '../client/components/app/app';
import reducers from '../client/store/reducers';
import epics from '../client/store/epics';
import History from '../client/components/router/history';
import _merge from 'lodash/merge';
#Injectable()
export class AppService {
constructor(
#Inject(forwardRef(() => ModelsService))
private readonly modelsService: ModelsService,
) {}
async createAppStore(
cookies: Record<string, string>,
params: string,
): Promise<Store> {
const calculatedState: CommonStateType = {
main: _merge({}, initState.main, {
onlineModelsCount: await this.modelsService.countOnlineModels(),
allModelsCount: await this.modelsService.countAllModels(),
}),
};
return createStore(
reducers,
calculatedState,
composeWithDevTools(...epics),
);
}
}
app.module.ts
import { TypeOrmModule } from '#nestjs/typeorm';
import { Module } from '#nestjs/common';
import { join } from 'path';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ModelsModule } from './models/models.module';
import { ServeStaticModule } from '#nestjs/serve-static';
import { Models } from './models/schemas/modelTable.entity';
import { serverConfig } from './configs/appConfig';
#Module({
imports: [
ModelsModule,
ServeStaticModule.forRoot({
rootPath: join(__dirname, serverConfig.clientPath),
}),
],
controllers: [AppController],
providers: [AppService],
})
export class AppModule {}
models.module.ts
import { Module } from '#nestjs/common';
import { ModelsService } from './models.service';
import { ModelsController } from './models.controller';
import { TypeOrmModule } from '#nestjs/typeorm';
import { Models } from './schemas/modelTable.entity';
#Module({
imports: [TypeOrmModule.forFeature([Models])],
controllers: [ModelsController],
providers: [ModelsService],
exports: [ModelsService],
})
export class ModelsModule {}
webpack.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: "production",
entry: path.resolve(__dirname, './src/server/main.ts'),
target: 'node',
optimization: {
minimize: true,
minimizer: [
`...`,
new CssMinimizerPlugin(),
]
},
devtool: 'inline-source-map',
externals: [nodeExternals({
modulesFromFile: true,
})],
output: {
filename: 'serverBundle.js',
path: path.resolve(__dirname, 'dist/static/server'),
},
stats: 'errors-warnings',
resolve: {
modules: [__dirname, 'node_modules'],
extensions: ["css", ".ts", ".tsx", ".scss", ".js", ".json"]
},
output: {
publicPath: "/"
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
chunkFilename: '[id].[contenthash].css'
})
],
module: {
rules: [
{
test: /\.ts(x?)$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.scss$/i,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[name]-[local]-[contenthash:base64:6]'
}
}
},
'sass-loader'
],
},
{
test: /\.svg$/,
loader: 'react-svg-loader',
options: {
classIdPrefix: '[name]-[hash:8]__',
uniqueIdPrefix: true,
}
},
{
test: /\.(png|webp|jpe?g|avif)$/i,
loader: 'file-loader',
options: {
publicPath: '/images/',
outputPath: '../client/images',
name:'[name].[contenthash].[ext]'
},
}
]
}
}
Does anyone experience this? what is the correct way to call an imported service in another module service?
The problem was with webpack minimizer. It sets the wrong class names for services.
optimization.minimizer = false
decided this problem.

SyntaxError: Unexpected token '<' SystemJs ( 0.21.5v )

I have Angular 9.0v and NodeJS 12.16v, systemjs 0.21.5v, core-js 2.6.9v in my package.json file.
I am getting this error -
(index):153 SyntaxError: Unexpected token '<'
at eval (<anonymous>)
at evaluate (http://localhost:8080/node_modules/systemjs/dist/system.src.js?1582797940325:2860:18)
at http://localhost:8080/node_modules/systemjs/dist/system.src.js?1582797940325:3665:23
at doEvaluateDynamic (http://localhost:8080/node_modules/systemjs/dist/system.src.js?1582797940325:1166:33)
at http://localhost:8080/node_modules/systemjs/dist/system.src.js?1582797940325:1026:17
at doEvaluateDynamic (http://localhost:8080/node_modules/systemjs/dist/system.src.js?1582797940325:1163:9)
at http://localhost:8080/node_modules/systemjs/dist/system.src.js?1582797940325:1026:17
at Object.eval (http://localhost:8080/app/main.js:3:14)
at eval (http://localhost:8080/app/main.js:13:4)
at eval (http://localhost:8080/app/main.js:14:3) Not expecting this error? Report it at https://github.com/mgechev/angular2- seed/issues
I have server and client. This is src/client file which has the main issue. Server is running.
App.module.ts
import { ErrorHandler, NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { BrowserModule, Title } from '#angular/platform-browser';
import { APP_BASE_HREF } from '#angular/common';
import { RouterModule } from '#angular/router';
import { routes } from './app.routes';
import { Http, HttpModule, RequestOptions, XHRBackend } from '#angular/http';
import {FormsModule, ReactiveFormsModule} from '#angular/forms';
import { AppRequestOptions, LoaderService, MessageService, SessionStorageService, ThemeChangeService,
BaseService, CommonService } from './shared/index';
import { ContactService } from './framework/dashboard/contact/contact.service';
import { ContactService1 } from './framework/home-page/home-page.service';
import { ActivateUserComponent } from './framework/registration/activate-user/activate-user.component';
import { ActiveUserService } from './framework/registration/activate-user/activate-user.service';
import { RedirectRecruiterDashboardService } from './user/services/redirect-dashboard.service';
import { LoggerService, MyErrorHandler } from './build-info/framework/my-error-handler.service';
import { UserModule } from './user/user.module';
import { SharedModule } from './shared/shared.module';
import { CustomHttp } from './shared/services/http/custom.http';
import { SharedService } from './shared/services/shared-service';
import { PageNotFoundComponent } from './shared/page-not-found/page-not-found.component';
import { AuthGuardService } from './shared/services/auth-guard.service';
import { HttpDelegateService } from './shared/services/http-delegate.service';
//Application IMPORTS
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import {ValidationService} from './shared/customvalidations/validation.service';
import {ErrorService} from './shared/services/error.service';
import {UsageTrackingService} from './build-info/framework/usage-tracking.service';
import {CreateProjectModule} from './build-info/framework/create-project/create-project.module';
import {DashboardModule} from './framework/dashboard/dashboard.module';
import {BuildingModule} from './build-info/framework/project/building/building.module';
import {ResetPasswordModule} from './framework/login/forgot-password/reset-password/reset-password.module';
import {CreateBuildingModule} from './build-info/framework/project/building/create-building/create-building.module';
import {LoginModule} from './framework/login/login.module';
import {CandidateSignUpModule} from './framework/registration/candidate-sign-up/candidate-sign-up.module';
import {ForgotPasswordModule} from "./framework/login/forgot-password/forgot-password.module";
import { AdminComponent } from './build-info/framework/admin/admin.component';
import { AdminService } from './build-info/framework/admin/admin.service';
import {ProjectHeaderVisibilityService} from "./shared/services/project-header-visibility.service";
#NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(routes),
HttpModule,
ReactiveFormsModule,
SharedModule,
UserModule,
CreateProjectModule,
CreateBuildingModule,
BuildingModule,
DashboardModule,
ResetPasswordModule,
ForgotPasswordModule,
LoginModule,
CandidateSignUpModule,
BrowserAnimationsModule
],
declarations: [
AppComponent,
ActivateUserComponent,
PageNotFoundComponent,
AdminComponent
],
providers: [
{
provide: Http,
useFactory: httpFactory,
deps: [XHRBackend, RequestOptions, MessageService, LoaderService]
},
{provide: RequestOptions, useClass: AppRequestOptions},
LoggerService, {provide: ErrorHandler, useClass: MyErrorHandler},
{
provide: APP_BASE_HREF,
useValue: '<%= APP_BASE %>'
},
ContactService,
ContactService1,
ActiveUserService,
RedirectRecruiterDashboardService,
SharedService,
Title,
AuthGuardService,
HttpDelegateService,
LoaderService,
UsageTrackingService,
ValidationService,
SessionStorageService,
MessageService,
SharedService,
ThemeChangeService, CommonService, BaseService, CustomHttp, ErrorService, SessionStorageService,
AdminService,
ProjectHeaderVisibilityService
],
bootstrap: [AppComponent]
})
export class AppModule {
}
export function httpFactory(backend: XHRBackend, defaultOptions: RequestOptions, messageService: MessageService,
loaderService: LoaderService) {
return new CustomHttp(backend, defaultOptions, messageService, loaderService);
}
Here above code is app.module.ts
Check in the network tab whether all the packages have been loaded properly or not or if you see html in that package then it means file is not found yet.
This is because node modules were not loaded properly. I fixed this issue by importing all the modules in a single system.config.ts.
Also add these lines in index.html
<script src="<%= APP_BASE %>app/system-config.js"></script>
<script>
System.import('app').catch(function (err) { console.error(err) })
</script>
system.config.ts
SystemJS.config({
paths: {
['app/main'] : `app/main`,
'#angular/animations':
'node_modules/#angular/animations/bundles/animations.umd.js',
'#angular/platform-browser/animations':
'node_modules/#angular/platform-browser/bundles/platform-browser-animations.umd.js',
'#angular/common': 'node_modules/#angular/common/bundles/common.umd.js',
'#angular/compiler':
'node_modules/#angular/compiler/bundles/compiler.umd.js',
'#angular/core': 'node_modules/#angular/core/bundles/core.umd.js',
'#angular/forms': 'node_modules/#angular/forms/bundles/forms.umd.js',
'#angular/common/http': 'node_modules/#angular/common/bundles/common-http.umd.js',
'#angular/platform-browser':
'node_modules/#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic':
'node_modules/#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/router': 'node_modules/#angular/router/bundles/router.umd.js',
'#angular/animations/browser':
'node_modules/#angular/animations/bundles/animations-browser.umd.js',
'#angular/common/testing':
'node_modules/#angular/common/bundles/common-testing.umd.js',
'#angular/compiler/testing':
'node_modules/#angular/compiler/bundles/compiler-testing.umd.js',
'#angular/core/testing':
'node_modules/#angular/core/bundles/core-testing.umd.js',
'#angular/common/http/testing':
'node_modules/#angular/common/bundles/common-http-testing.umd.js',
'#angular/platform-browser/testing':
'node_modules/#angular/platform-browser/bundles/platform-browser-testing.umd.js',
'#angular/platform-browser-dynamic/testing':
'node_modules/#angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
'#angular/router/testing':
'node_modules/#angular/router/bundles/router-testing.umd.js',
'html2canvas': 'node_modules/html2canvas/dist/html2canvas.min.js',
'lodash': 'node_modules/lodash/lodash.js',
'device_uuid': 'node_modules/device-uuid/lib/device-uuid.min.js',
'highcharts': 'node_modules/highcharts/highcharts.js',
'jspdf': 'node_modules/jspdf/dist/jspdf.min.js',
'app/': `/app/`,
// For test config
'dist/dev/': '/base/dist/dev/',
'': 'node_modules/',
},
packages: {
'app': {
main: 'main.js',
defaultExtension: 'js'
},
'rxjs': {
main: 'index.js',
defaultExtension: 'js'
},
'rxjs/operators': {
main: 'index.js',
defaultExtension: 'js'
},
'rxjs/internal/operators': {
main: 'index.js',
defaultExtension: 'js'
},
}
});

Application always serves '/' to express app

Have an angular 7 application and have implemented angular universal using node and express, and then deployed to firebase.
Having an issue when trying to load pages other than the root (/), which causes the server to return the html of the root (/) rather than the page the user requests.
Not sure from where the issue is originating (Angular, Angular Universal or Firebase).
This is my index.ts:
import * as functions from 'firebase-functions';
import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import {renderModuleFactory} from '#angular/platform-server';
import {enableProdMode} from '#angular/core';
import * as express from 'express';
import {readFileSync} from 'fs';
enableProdMode();
const app = express();
const indexHtml = readFileSync(__dirname + '/index-server.html', 'utf-8').toString();
const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./main');
import {provideModuleMap} from '#nguniversal/module-map-ngfactory-loader';
app.engine('html', (_, options, callback) => {
// Always '/' (root path)
console.log('OPTIONS.REQ.URL', options.req.url);
renderModuleFactory(AppServerModuleNgFactory, {
// My index-server.html
document: indexHtml,
url: options.req.url,
extraProviders: [
provideModuleMap(LAZY_MODULE_MAP)
]
}).then(html => {
callback(null, html);
});
});
app.set('view engine', 'html');
app.set('views', __dirname);
app.get('*.*', express.static(__dirname + '/dist', {
maxAge: '1y'
}));
app.get('*', (req, res) => {
res.render(__dirname + '/index-server.html', {req});
});
exports.ssrApp = functions.https.onRequest(app);
This is my app-routing.module.ts:
import {RouterModule, Routes} from '#angular/router';
import {NgModule} from '#angular/core';
import {HomePageComponent} from './home-page/home-page.component';
import {ToursComponent} from './tours/tours.component';
import {MaltaComponent} from './malta/malta.component';
import {AboutComponent} from './about/about.component';
import {ContactComponent} from './contact/contact.component';
import {TourComponent} from './tours/tour/tour.component';
import {ErrorComponent} from './error/error.component';
import {BlogComponent} from './blog/blog.component';
import {BlogPageComponent} from './blog/blog-page/blog-page.component';
import {PageResolver} from './services/pages/page-resolver.service';
const AppRoutes: Routes = [
{
path: 'home',
component: HomePageComponent,
data: {
state: 'home',
pageId: 'home'
},
resolve: {
page: PageResolver
}
},
{
path: 'tours',
component: ToursComponent,
data: {
state: 'tours',
pageId: 'tours'
},
resolve: {
page: PageResolver
}
},
{
path: 'tours/:id',
component: TourComponent,
data: {
state: 'tour'
}
},
{
path: 'blog',
component: BlogComponent,
data: {
state: 'blogs',
pageId: 'blog'
},
resolve: {
page: PageResolver
}
},
{
path: 'blog/:id',
component: BlogPageComponent,
data: {
state: 'blog'
}
},
{
path: 'malta',
component: MaltaComponent,
data: {
state: 'malta',
pageId: 'malta'
},
resolve: {
page: PageResolver
}
},
{
path: 'about',
component: AboutComponent,
data: {
state: 'about',
pageId: 'about'
},
resolve: {
page: PageResolver
}
},
{
path: 'contact',
component: ContactComponent,
data: {
state: 'contact',
pageId: 'contact'
},
resolve: {
page: PageResolver
}
},
{
path: 'something-went-wrong',
component: ErrorComponent,
data: {
state: 'error',
pageId: 'error'
}
},
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
},
{
path: '**',
redirectTo: '/something-went-wrong'
}
];
#NgModule({
imports: [
RouterModule.forRoot(AppRoutes, {
useHash: true,
scrollPositionRestoration: 'enabled',
initialNavigation: 'enabled'
})
],
exports: [RouterModule]
})
export class AppRoutingModule {
}
This is my firebase.json:
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"function": "ssrApp"
}
]
},
"functions": {
"predeploy": "npm --prefix \"$RESOURCE_DIR\" run build"
}
}
Would appreciate any help with this issue!
The issue is solved after removing useHash: true from the app-routing.module.ts.
Thanks to yeya for helping get to the solution.
Your issue is related to Browser URL styles
Based on this answer: Try change the rewrites from "function": "ssrApp" to "destination": "/index-server.html"
The requestindex-server.html will trigger the function.

I can not directly access an url in Angular

I have a problem with a simple application. I already have it in production, but when I access a URL directly, I get an error:
In firefox:
In chrome:
But if I access localhost:8080, it is redirected to /home correctly:
I am using the following code:
In app.routes.ts
import { RouterModule, Routes } from '#angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { HeroesComponent } from './components/heroes/heroes.component';
import { HeroeComponent } from './components/heroe/heroe.component';
import { BuscarComponent } from './components/buscar/buscar.component';
const ROUTES: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'heroes', component: HeroesComponent },
{ path: 'heroe/:id', component: HeroeComponent },
{ path: 'buscar/:palabra', component: BuscarComponent },
{ path: '**', pathMatch: 'full', redirectTo: 'home' }
];
export const APP_ROUTING = RouterModule.forRoot(ROUTES);
In app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { APP_ROUTING } from './app.routes';
import { HeroesService } from './servicios/heroes.service';
import { AppComponent } from './app.component';
import { NavbarComponent } from './components/shared/navbar/navbar.component';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { HeroesComponent } from './components/heroes/heroes.component';
import { HeroeComponent } from './components/heroe/heroe.component';
import { BuscarComponent } from './components/buscar/buscar.component';
import { HeroeTarjetaComponent } from './components/heroe-tarjeta/heroe-tarjeta.component';
#NgModule({
declarations: [
AppComponent,
NavbarComponent,
HomeComponent,
AboutComponent,
HeroesComponent,
HeroeComponent,
BuscarComponent,
HeroeTarjetaComponent
],
imports: [
BrowserModule,
APP_ROUTING
],
providers: [
HeroesService
],
bootstrap: [AppComponent]
})
export class AppModule { }
I try to change { path: '**', pathMatch: 'full', redirectTo: 'home' } to { path: '', pathMatch: 'full', redirectTo: 'home' } or anything and nothing, not solve.
I tried the application with the NodeJS http-server module.

Ng2-Smart-table not working, returns 404 not found error and system.js error

I am trying to implement the ng2-smarttable in my Angular2 project and returns me the following errors in the console,
GET http://localhost:3000/traceur 404 (Not Found)
I tried running a command "npm install" by deleting the ng2-smart-table , but then it returns the same error.
**My System.js file**
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/',
'underscore': './node_modules/underscore/underscore.js'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler':
'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-
browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-
dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/http/testing': 'npm:#angular/http/bundles/http-
testing.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'ng2-smart-table': 'npm:ng2-smart-table',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
/** Path for ng2-file-upload */
'ng2-file-upload' : 'npm:ng2-file-upload',
'ng2-drag-drop': 'npm:ng2-drag-drop',
'ng2-dnd': 'npm:ng2-dnd',
'underscore': 'npm:underscore'
},
// packages tells the System loader how to load when no filename and/or
no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
},
/** Configuration for ng2-file-upload */
'ng2-file-upload' : {
main: './ng2-file-upload.js',
defaultExtension: 'js'
},
'ng2-smart-table': {main: 'index.js', defaultExtension: 'js' } ,
'ng2-drag-drop': { main: '/index.js', defaultExtension: 'js' },
'underscore': { main: '/underscore.js', defaultExtension: 'js' },
'ng2-dnd': { main: '/bundles/index.umd.js', defaultExtension: 'js' }
},
});
})(this);
My app.module.ts if file is as follows,
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { FileSelectDirective, FileDropDirective } from 'ng2-file-upload';
import { Ng2DragDropModule } from 'ng2-drag-drop';
import {DndModule} from 'ng2-dnd';
import { Ng2SmartTableModule } from 'ng2-smart-table';
import { AppComponent } from './app.component';
import { routing } from './app.routing';
import { AppConfig } from './app.config';
import { AlertComponent } from './_directives/index';
import { AuthGuard } from './_guards/index';
import { AlertService, AuthenticationService, UserService, SchemaService }
from
'./_services/index';
import { HomeComponent } from './home/index';
import { LoginComponent } from './login/index';
import { RegisterComponent } from './register/index';
import { UploadComponent } from './upload/index';
import { ReadComponent } from './read/index';
import { DragComponent } from './drag/index';
#NgModule({
imports: [
BrowserModule,
DndModule.forRoot(),
FormsModule,
HttpModule,
routing,
Ng2DragDropModule,
Ng2SmartTableModule
],
declarations: [
AppComponent,
AlertComponent,
HomeComponent,
LoginComponent,
RegisterComponent,
FileSelectDirective,
UploadComponent,
ReadComponent,
DragComponent
],
providers: [
AppConfig,
AuthGuard,
AlertService,
AuthenticationService,
UserService,
SchemaService
],
bootstrap: [AppComponent]
})
export class AppModule { }
The Error message I get when I use 'ng2-smart-table': { main: 'bundles/table.umd.js', defaultExtension: 'js' },
My "app.module.ts" file is as shown below:
You cannot use ng2-smart-table like this.
The ng2-smart-table release target is not ES5, but ES5. SystemJS knows that the index.js is in ES6 (and will not run in many browsers by default) and tries to transpile it using traceur to ES5. Although, there is bundled ES5 file which can be loaded by SystemJS. It is located in ng2-smart-table/bundles/table.umd.js. I am not very familiar with SystemJS, but you may try this:
'ng2-smart-table': {main: 'bundles/table.umd.js', defaultExtension: 'js' }
For the future, please remember that traceur problems in SystemJS usually means that you need to point bundled ES5 library file instead of, for example, index.js.
P.S.: This would not be a problem with angular-cli.

Resources