Ошибка консоли Angular 5 HttpClientModule при импорте - PullRequest
0 голосов
/ 12 октября 2018

Я начал проект с использованием Angular5 внутри проекта ASP.NET MVC.Я следовал официальному учебнику на сайте Angular, просто чтобы промочить ноги, и до сих пор это было здорово.

Я дошел до конца учебника, используя модуль Http, ноЯ не могу импортировать модуль.Когда я добавляю HttpClientModule в список импорта, я получаю эту консольную ошибку:

Ошибка: неожиданный токен <Оценка <a href="http://localhost:54129/node_modules/@angular/common/bundles/common.umd.js/http" rel="nofollow noreferrer">http://localhost:54129/node_modules/@angular/common/bundles/common.umd.js/http Оценка http://localhost:54129/app/app.module.jsОценка http://localhost:54129/app/main.js
Загрузка приложения / main.jsв eval ()при оценке (valu.js: 106)at instantiate.js: 394в dynamicExecute (register-loader.js: 665)в doEvaluate (register-loader.js: 612)at sureEvaluate (register-loader.js: 520)at register-loader.js: 538в Object.eval (: 54129 / app / app.module.js: 12)в eval (: 54129 / app / app.module.js: 34)в eval (: 54129 / app / app.module.js: 35)(анонимно) @ localhost /: 20

В результате некоторых поисков я обнаружил, что, возможно, мне нужно включить:

'@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
  'tslib': 'npm:tslib/tslib.js'

в мой файл systemjs.config.js, который у меня естьсделано, но ошибка не устранена.

Вот мой app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { AccountInfoComponent } from './AccountInfo/AccountInfoComponent';
import { VehicleComponent } from './Vehicle/VehicleComponent';

import { UserService } from './Services/UserService';
import { CustomerService } from './Services/CustomerService';

@NgModule({
    imports: [BrowserModule, FormsModule, AppRoutingModule, HttpClientModule],
    declarations: [AppComponent, AccountInfoComponent, VehicleComponent],
    bootstrap: [AppComponent],
    providers: [UserService, CustomerService]
})
export class AppModule { }

И мой systemjs.config.js:

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // 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/common/http': 'npm:@angular/common/bundles/common-http.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/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

    // other libraries
    'tslib': 'npm:tslib/tslib.js',
    'rxjs': 'npm:rxjs',
    'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        defaultExtension: 'js',
        meta: {
          './*.js': {
            loader: 'systemjs-angular-loader.js'
          }
        }
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

Есть идеи, что мне не хватает или что я делаю не так?

1 Ответ

0 голосов
/ 12 октября 2018

Эта ошибка может быть вызвана тем, как она собирается (с, я полагаю, угловым CLI (. Какие флаги вы используете в ng build? Проверьте имена файлов в каталоге назначения углового CLI. В сборке dev,файлы называются «inline.bundle.js»; в производственной сборке реализована очистка кэша, поэтому они имеют такие забавные имена, как «inline.d78byc79tcnuasdf.bundle.js».

Что-то подобное должно работать:ng build --prod --ec=false --oh=media При этом скрипты и стили сохраняются в том же формате, что и в разработке.

Различные флаги для сборок prod и dev обсуждаются в документации здесь: https://github.com/angular/angular-cli/wiki/build#--dev-vs---prod-builds

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...