I have an Angularjs application. I have to migrate it to Angular. I am following the angular tutorial - https://angular.io/guide/upgrade.
My angular app.module looks like
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
import module from './app.module.ajs';
@NgModule({
imports: [
BrowserModule,
UpgradeModule
]
})
export class AppModule {
constructor(private upgrade: UpgradeModule) { }
ngDoBootstrap(){
this.upgrade.bootstrap(document.documentElement, [module.name], {strictDi: true});
}
}
I am importing my angularjs app in this file and bootstrapping it manually.
I have added a main.ts file to bootstrap angular module app.module. My main .ts looks like
import 'zone.js';
import 'reflect-metadata';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { setAngularLib } from '@angular/upgrade/static';
import * as angular from 'angular';
import { AppModule } from './app.module';
setAngularLib(angular);
platformBrowserDynamic().bootstrapModule(AppModule);
I have added main.ts as entry point in webpack.
In my index.html I have removed ng-app. My index.html looks like:
<script src="javascripts/main.js">
<script src="javascripts/vendor.js">
<body>
<main-app></main-pp>
</body>
is an angularJS component. main.js and vendor.js are bundle files generated by bootstrap.
Package.json:
{
"scripts": {
"dev": "webpack-dev-server --env.env=dev",
"test": "karma start"
},
"dependencies": {
"angular": "1.6.6",
"angular-route": "1.6.6",
"jquery": "^2.2.4",
"moment": "~2.17.1",
"bootstrap": "3.3.7",
"lodash": "4.17.4",
"@angular/common": "^5.2.5",
"@angular/compiler": "^5.2.5",
"@angular/core": "^5.2.5",
"@angular/forms": "^5.2.5",
"@angular/platform-browser": "^5.2.5",
"@angular/platform-browser-dynamic": "^5.2.5",
"@angular/router": "^5.2.5",
"@angular/upgrade": "^5.2.5",
"angular": "1.6.6",
"angular-route": "1.6.6",
"bootstrap": "3.3.7",
"core-js": "^2.5.3",
"jquery": "^2.2.4",
"lodash": "4.17.4",
"moment": "~2.17.1",
"reflect-metadata": "^0.1.12",
"rxjs": "^5.5.6",
"zone.js": "^0.8.20"
},
"devDependencies": {
"@types/angular": "^1.6.39",
"@types/node": "^8.0.53",
"angular-mocks": "^1.6.7",
"autoprefixer": "^7.1.6",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.5",
"html-webpack-plugin": "^2.30.1",
"jasmine-core": "^2.8.0",
"karma": "^1.7.1",
"karma-jasmine": "^1.1.0",
"karma-phantomjs-launcher": "^1.0.4",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.6",
"node-sass": "^4.7.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"phantomjs-prebuilt": "^2.1.16",
"postcss-loader": "^2.0.9",
"raw-loader": "^0.5.1",
"rimraf": "^2.6.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"ts-loader": "^3.1.1",
"typescript": "2.4.2",
"webpack": "^3.3.0",
"webpack-dev-server": "^2.9.5",
"webpack-merge": "^4.1.1"
}
}app.module.ajs looks like(skipped the imports):
export default angular.module('app', [
mainApp.name,
customers.name,
orders.name
])
But this main-app is not getting rendered. It is not throwing any error. If I add some other static content, it is displaying that but not angular component.
Please help me find what I am doing wrong.
