Создание Angular проекта без веб-пакета и Angular CLI - PullRequest
0 голосов
/ 26 сентября 2019

Я угловой новичок.Я хочу создать угловой проект без CLI.Я сослался на эту ссылку - https://blog.angularindepth.com/setting-up-angular-from-scratch-1f518c65d8ab, чтобы создать проект, но проблема заключается в том, что index.html загружается в браузер.Я не уверен, является ли конфигурация в данной ссылке специфичной для Angular 6, так как я использую Angular 8. Было бы очень полезно, если бы я получил какое-то решение.Вот мои файлы, которые я создал:

**** index.html **

<html>
  <head>
      <meta charset="utf-8">
    <title>Hello, Angular</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <app-main>Loading...</app-main>  
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
    <script src="../systemjs.config.js"></script>
    <script>
      System.import('../dist/main.js').catch(function (err) {
          console.error(err);
      });
    </script>  
    <h1>Hi Abc</h1>
  </body>
</html>

systemjs.config.js

System.config({
  paths: {
    'npm:': '/node_modules/'
  },
  map: {
    app: 'dist/app',
    // app: { main: 'main.js', defaultExtension: 'js' },
    '@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',
    'core-js': 'npm:core-js',
    'zone.js': 'npm:zone.js',
    // 'rxjs': 'npm:rxjs',
    'rxjs': 'npm:rxjs-compat',
    'tslib': 'npm:tslib/tslib.js'
  },
  packages: {
    'dist/app': {},
    'rxjs': {'main': 'index.js','defaultExtension': 'js'},
    'rxjs/operators': {'main': 'index.js','defaultExtension': 'js'},
    'rxjs/internal-compatibility': {'main': 'index.js','defaultExtension': 'js'},
    'rxjs/testing': {'main': 'index.js','defaultExtension': 'js'},
    'rxjs/ajax': {'main': 'index.js','defaultExtension': 'js'},
    'rxjs/webSocket': {'main': 'index.js','defaultExtension': 'js'},
    'rxjs-compat': {'main': 'index.js','defaultExtension': 'js'},
    'core-js': {},
    'zone.js': {}
  }
});

main.ts

import 'core-js/es7/reflect';
import 'zone.js/dist/zone';
import { platformBrowserDynamic } 
                     from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts

import { AppComponent} from './app.component';
import {NgModule } from '@angular/core';
import { BrowserModule} from '@angular/platform-browser';

@NgModule({
    imports : [BrowserModule],
    declarations : [AppComponent],
    bootstrap : [AppComponent]
})

export class AppModule {

}

Я ссылался на различные ссылки и до сих пор не смог найти гдеиз index.html будет загружен, если я использую Angular 8 и ссылаюсь на ссылку выше?

Ответы [ 2 ]

0 голосов
/ 28 сентября 2019

Это изменения, которые я сделал, и это сработало:

System.import ('../ dist / main.js');

до

Система.import ('app');

Изменено Systemjs.config.js:

System.config({
  paths: {
    'npm:': 'node_modules/'
  },

  map: {
    'app': 'dist/app',
    '@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',
    'core-js': 'npm:core-js',
    'zone.js': 'npm:zone.js',
    'rxjs': 'npm:rxjs',
    'tslib': 'npm:tslib/tslib.js'
  },
  packages: {

    'rxjs': {
      'main': 'index.js', 'defaultExtension': 'js'
    },
    'app': {
      'main': './main.js'
    },
    'rxjs/operators': { 'main': 'index.js', 'defaultExtension': 'js' },
    'rxjs/internal-compatibility': { 'main': 'index.js', 'defaultExtension': 'js' },
    'rxjs/testing': { 'main': 'index.js', 'defaultExtension': 'js' },
    'rxjs/ajax': { 'main': 'index.js', 'defaultExtension': 'js' },
    'rxjs/webSocket': { 'main': 'index.js', 'defaultExtension': 'js' },
    'rxjs-compat': { 'main': 'index.js', 'defaultExtension': 'js' },
    'core-js': {},
    'zone.js': {}
  }
})

Используется "systemjs": "^ 0.20.19", "zone.js": "^0.10.2 "в package.json вместо последних зависимостей System.js.Вот так все работало нормально:)

0 голосов
/ 26 сентября 2019

Простой ответ: не делай этого.Angular CLI предлагает вам создать базовую структуру, реализованную в соответствии с лучшими практиками Angular.Он даже генерирует базовые юнит-тесты для вас.

=> Просто используйте CLI для генерации ваших проектов:)

...