Angualrjs в Angular с помощью ng-upgrade - PullRequest
Новая
       7

Angualrjs в Angular с помощью ng-upgrade

0 голосов
/ 29 июня 2018

У меня есть приложение Angularjs. Я должен перенести его в Angular. Я слежу за угловым уроком - https://angular.io/guide/upgrade.

Мой угловой app.module выглядит как 

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});
    }
}

Я импортирую мое приложение angularjs в этот файл и загружаю его вручную.

Я добавил файл main.ts в модуль начальной загрузки app.module. Мой главный .ts выглядит как 

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);

Я добавил main.ts как точку входа в веб-пакете.

В моем index.html я удалил ng-app. Мой index.html выглядит так: 

  <script  src="javascripts/main.js">
  <script  src="javascripts/vendor.js">
  <body>
      <main-app></main-pp>

  </body>

является угловым компонентом JS. main.js и vendor.js - это файлы комплектов, сгенерированные программой начальной загрузки.

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 выглядит (пропустил импорт): 

export default angular.module('app', [
mainApp.name,
customers.name,
orders.name
])

Но это основное приложение не отображается. Это не бросает никакой ошибки. Если я добавлю какой-то другой статический контент, он отображает этот, но не угловой компонент.

Пожалуйста, помогите мне понять, что я делаю неправильно.

1 Ответ

0 голосов
/ 30 июня 2018

Вы непосредственно копировали / вставляли index.html? Если это так, у вас есть двойные кавычки для исходных файлов скрипта src=""javascripts..., которые должны быть одинарными кавычками 

  <script  src="javascripts/main.js">
  <script  src="javascripts/vendor.js">
  <body>
      <main-app></main-pp>

  </body>

В противном случае просмотр вашего модуля .ajs и файла package.json может помочь диагностировать

...