I have an EmberJs application along with requireJs, after optimisations I want to replace requirejs library with AlmondJs But I always get this error
Cannot find module handlebars.
Does anybody know what it could be?
Here is my build file
({
appDir: "../",
baseUrl: ".",
dir: '../../www',
modules: [
{
name: "app/main"
}
],
inlineText: false,
//removeCombined: true,
preserveLicenseComments: false,
insertRequire: ['app/main'],
wrap:true,
paths: {
jquery: 'js/libs/jquery-1.9.1',
jquerycookies: 'js/libs/jquery.cookie',
//jqueryhotkeys: 'js/libs/jquery.hotkeys',
// jquerytouchSwipe: 'js/libs/jquery.touchSwipe.min',
// jqueryui: 'js/libs/jquery-ui.custom.min',
// jqueryUiWidget: 'js/libs/jquery.ui.widget',
//jqueryDropzone: 'js/libs/jquery.fileupload',
jqueryJcrop: 'js/libs/jquery.Jcrop.min',
highcharts: 'js/libs/highcharts',
fastClick: 'js/libs/ember-fastclick',
emberAnalytics: 'js/libs/ember-analytics',
// fullCalendar: 'js/libs/fullcalendar.min',
responsiveTables: 'js/libs/responsive-tables',
lazyload: 'js/libs/jquery.lazyload.min',
handlebars: 'js/libs/handlebars',
ember: 'js/libs/ember',
// ember_data: 'js/libs/ember-data.min',
ember_animate: 'js/libs/ember-animated-outlet',
// ember_I18n: 'js/libs/i18n',
foundation: 'js/foundation/foundation',
foundationReveal: 'js/foundation/foundation.reveal',
foundationDropdown: 'js/foundation/foundation.dropdown',
foundationForms: 'js/foundation/foundation.forms',
foundationJoyride: 'js/libs/intro',
// ckeditorcore: 'js/ckeditor/ckeditor',
// ckeditorjquery: 'js/ckeditor/adapters/jquery',
datePicker: 'js/plugins/jquery.simple-dtpicker'
},
shim: {
'ember': {
deps: ['jquery','handlebars'],
exports: 'Ember'
},
'fastClick': {
deps: ['ember'],
exports: 'fastClick'
},
'emberAnalytics': {
deps: ['ember'],
exports: 'emberAnalytics'
},
'ember_animate': {
deps: ['ember'],
exports: 'Animate'
},
'jqueryJcrop': {
deps: ['jquery']
},
'jquerycookies': {
deps: ['jquery'],
exports: 'jQueryCookies'
},
'jqueryDropzone': {
deps: ['jquery'],
exports: 'jqueryDropzone'
},
'foundationJoyride': {
exports: 'foundationJoyride'
},
'datePicker': {
deps: ['jquery'],
exports: 'datePicker'
},
'highcharts': {
deps: ['jquery'],
exports: 'highcharts'
},
'responsiveTables': {
deps: ['jquery'],
exports: 'responsiveTables'
},
'lazyload': {
deps: ['jquery'],
exports: 'lazyload'
},
'foundation': {
deps: ['jquery'],
exports: 'foundation'
},
'foundationReveal': {
deps: ['jquery', 'foundation'],
exports: 'foundation'
},
'foundationDropdown': {
deps: ['jquery', 'foundation', 'foundationForms'],
exports: 'foundation'
},
'foundationForms': {
deps: ['jquery', 'foundation'],
exports: 'foundation'
}
},
waitSeconds: 60
})
after changing my buid file to
baseUrl: '../',
name: 'js/libs/almond',
include: ['app/main'],
insertRequire: ['app/main'],
out: '../../www/app/main.js',
//wrap: true,
and removing wrap:true option its working probbaly
Thanks
I had the same problem with Handlebars 1.3.0. I was using mimosa.io as my build system.
Wrapping all of handlebars.js with,
(function(){
// Insert existing hb.js code here //
this.Handlebars = Handlebars;
}).call(this);
fixed it!
Thanks for the hint - #c4p
Related
I've been working on using ModuleFederation and have ran into an issue where if the remote webpack configuration had optimize.splitChunks.chunk = "all" then the host application would throw a loadScript exception. This could be a complete fundamental knowledge gap on my part why that wouldn't work. I haven't seen any documentation on not using that option along with Module Federation.
Has anyone had similar experiences or can tell me why it's a conflicting setting?
Thanks for your help!
remote webpack.config.js
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { ModuleFederationPlugin } = webpack.container;
module.exports = {
entry: "./index.js",
mode: "development",
devServer: {
contentBase: path.join(__dirname, "dist"),
port: 1338,
},
output: {
publicPath: "auto",
},
optimization: {
splitChunks: {
chunk: "all"
}
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: "babel-loader",
exclude: /node_modules/,
options: {
presets: ["#babel/preset-react"],
},
},
],
},
plugins: [
new ModuleFederationPlugin({
name: "comic",
filename: "remoteEntry.js",
exposes: {
"./XKCD": "./app.jsx",
},
shared: [
{
react: { singleton: true, eager: true },
"react-dom": { singleton: true, eager: true },
},
],
}),
new HtmlWebpackPlugin({
template: "./index.html",
}),
],
};
host webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack").container
.ModuleFederationPlugin;
const path = require("path");
module.exports = {
entry: "./index.js",
mode: "development",
devServer: {
contentBase: path.join(__dirname, "dist"),
port: 1337,
},
output: {
publicPath: "auto",
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: "babel-loader",
exclude: /node_modules/,
options: {
presets: ["#babel/preset-react"],
},
},
],
},
plugins: [
new ModuleFederationPlugin({
name: "home",
filename: "remoteEntry.js",
remotes: {
comic: `comic#http://localhost:1338/remoteEntry.js)`,
},
shared: [
{
react: { singleton: true, eager: true },
"react-dom": { singleton: true, eager: true },
},
],
}),
new HtmlWebpackPlugin({
template: "./index.html",
}),
],
};
I have a similar problem.
I change the remote webpack.config.js optimization.splitChunks as
optimization: {
splitChunks: {
chunks: 'async'
}
}
This problem is fixed.
Maybe you can try it.
Sorry my pool english
After I installed jest, setup babel, eslint, jest-setup and etc then I checked jest works fine.
But when I npm run serve(vue-clie-service serve), It includes test folders(__test __/abc.spec.js).
I would like to exclude all files below __test
__ direcotry when npm run serve.
It occurs error now jest is not defined. describe is note defined...
#jest.config.js
module.exports = {
moduleFileExtensions: [
"js",
"json",
"vue",
],
transform: {
".*\\.(vue)$": "vue-jest",
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".+\\.(css|styl|less|sass|scss)$": "jest-transform-css",
},
moduleNameMapper: {
"^#/(.*)$": "<rootDir>/src/$1",
"\\.(css|less|scss|sass)$": "identity-obj-proxy",
},
transformIgnorePatterns: ["<rootDir>/node_modules/"],
collectCoverage: false,
collectCoverageFrom: ["**/*.{js,vue}", "!**/node_modules/**"],
coverageReporters: ["html", "text-summary"],
testMatch: [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}",
],
setupFilesAfterEnv: ["<rootDir>/jest-setup.js"],
preset: "#vue/cli-plugin-unit-jest",
};
# main.js
import Vue from "vue";
import "./plugins/axios";
import App from "./App";
import router from "./router";
import store from "./store";
import i18n from "./plugins/i18n";
import vuetify from "./plugins/vuetify";
import "#/assets/styles/_global.scss";
import "#babel/polyfill";
Vue.config.productionTip = false;
new Vue({
i18n,
router,
store,
vuetify,
render: h => h(App),
}).$mount("#app");
# vue.config.js
const path = require("path");
const ansiRegex = require("ansi-regex");
module.exports = {
devServer: {
proxy: {
"/api": {
target: process.env.VUE_APP_TARGET,
changeOrigin: true,
},
},
},
configureWebpack: {
resolve: {
alias: {
"#": path.join(__dirname, "src/"),
},
},
},
css: {
loaderOptions: {
scss: {
prependData: "#import \"#/assets/styles/_global.scss\";",
},
},
},
transpileDependencies: [
"vuetify",
ansiRegex,
],
};
i try to help you but could you share jest.config.js or another config file.
Could you try this code on config file.
Attention: You must edit your folder path and if you don't use Typescript, you delete ts and tsx.
#jest.config.js
module.exports = {
preset: 'ts-jest',
verbose: true,
collectCoverage: true,
collectCoverageFrom: [
'**/*.{ts,vue}',
'!**/node_modules/**',
'!**/vendor/**'
],
coverageReporters: [
'json', 'lcov', 'text'
],
moduleFileExtensions: [
'js',
'jsx',
'json',
'vue',
'ts',
'tsx'
],
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\\.tsx?$': 'ts-jest',
'^.+\\.ts?$': 'ts-jest',
'^.+\\.jsx?$': 'babel-jest',
'^.+\\.js?$': 'babel-jest'
},
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/src/$1',
'^#/application/(.*)$': '<rootDir>/src/application/$1',
'^#/common/(.*)$': '<rootDir>/src/common/$1',
'^#/components/(.*)$': '<rootDir>/src/components/$1'
},
transformIgnorePatterns: [
'/node_modules/(?!(tiny-slider)/(.*)$)'
],
snapshotSerializers: [
'jest-serializer-vue'
],
testMatch: [
'**/src/**/*.spec.(js|jsx|ts|tsx)',
'**/src/application/**/*.spec.(js|jsx|ts|tsx)',
'**/src/common/**/*.spec.(js|jsx|ts|tsx)',
'**/src/components/**/*.spec.(js|jsx|ts|tsx)',
'**/tests/unit/**/*.spec.(js|jsx|ts|tsx)'
],
testURL: 'http://localhost:8080/'
}
I am trying to use Module Dynamic Import to create a bundle with an npm package using this is an excellent tutorial: https://webpack.js.org/guides/code-splitting/
But the npm package that I want to load dynamically has its own chunk dependencies:
npm package chunk dependencies
I can see that Webpack created correctly the vendor chunk:
files generated
But the npm package to import 's chunks are not re-imported, so it fails:
the error
I googled a lot but I couldn't find much information about it and, I don't know if it is a bug, misconfiguration or it is not possible.
CONFIG:
// my-project/index.js
const initializeLiveAR = await import(/* webpackChunkName: */ 'revieve-livear-module'); "livear_[index]"
// webpack.config.js
module.exports = {
entry: {
'revieve-sdk': path.resolve(__dirname, config.main_entry),
demoAR: path.resolve(__dirname, config.demoAR),
demoPR: path.resolve(__dirname, config.demoPR),
},
devtool: 'source-map',
mode: process.env.NODE_ENV,
output: {
path: path.resolve(__dirname, 'build'),
publicPath: '/',
filename: '[name].min.js',
chunkFilename: '[name].chunk.js',
libraryTarget: 'umd',
},
plugins: [
process.env.ANALYZEBUNDLE ? new BundleAnalyzerPlugin() : function() {},
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
}),
new CopyWebpackPlugin([
{ from: 'index.html', to: '.' },
{ from: 'test', to: './test' },
{ from: 'changelog.md', to: '.' },
]),
],
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.css$/,
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
},
],
},
};
I want to have some dependencies in different chunks so client.js would be smaller. webpack 4.16.5
Why I get same code included to several chunks? What's missing?
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
mode: 'production',
target: 'web',
// devtool: 'source-map',
entry: {
echarts: ['echarts'],
vendor_1: ['react', 'immutable', 'lodash', 'redux', 'redux-saga'],
vendor_2: ['#material-ui/core', '#tinymce/tinymce-react'],
client: ['babel-polyfill', path.join(__dirname, 'app/index.js')],
},
output: {
path: path.join(__dirname, '/dist/'),
filename: '[hash].[name].js',
publicPath: './',
},
resolve: {
modules: [
path.join(__dirname, '/app'),
'node_modules',
],
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
template: 'app/index.tpl.html',
inject: 'body',
filename: 'index.html',
}),
new BundleAnalyzerPlugin(),
],
module: {
rules: [
{
test: /\.js?$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
}],
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader?modules&localIdentName=[name]---[local]---[hash:base64:5]',
'sass-loader',
],
},
{
test: /\.woff(2)?(\?[a-z0-9#=&.]+)?$/,
use: [{
loader: 'url?limit=10000&mimetype=application/font-woff',
}],
},
{
test: /\.(ttf|eot|svg)(\?[a-z0-9#=&.]+)?$/,
use: [{
loader: 'file',
}],
},
],
},
};
I added optimization config and it works now as expected.
optimization: {
splitChunks: {
chunks: 'initial',
},
},
I've played with values a bit and this was the best result for my code base without any extra code edits. You can find all possible options here:
https://webpack.js.org/configuration/optimization/
Thanks Pavel for the tip ;)
my application is running good but unit test doesn't work.
below error throws when i try to npm test
**
help me to resolve my issue
and whats the correct procedure to follow angular2 unit test,
thanks in advance..
package.json
{
"name": "angular-quickstart",
"version": "1.0.0",
"description": "QuickStart package.json from the documentation, supplemented with testing support",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"docker-build": "docker build -t ng2-quickstart .",
"docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart",
"pree2e": "npm run webdriver:update",
"e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
"lint": "tslint ./app/**/*.ts -t verbose",
"lite": "lite-server",
"postinstall": "typings install",
"test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
"test-once": "tsc && karma start karma.conf.js --single-run",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings",
"webdriver:update": "webdriver-manager update"
},
"keywords": [],
"author": "KOC",
"license": "ISC",
"dependencies": {
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/core": "2.0.0",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/router": "3.0.0",
"#angular/upgrade": "2.0.0",
"angular-2-local-storage": "0.0.19",
"angular-in-memory-web-api": "~0.1.0",
"angular2-google-maps": "^0.15.0",
"angular2-highcharts": "^0.3.4",
"angular2-logger": "^0.5.0",
"bootstrap": "^3.3.6",
"core-js": "^2.4.1",
"ng2-modal": "0.0.21",
"ng2-pagination": "^0.5.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.38",
"zone.js": "^0.6.23"
},
"devDependencies": {
"concurrently": "^2.2.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3",
"typings": "^1.4.0",
"canonical-path": "0.0.2",
"http-server": "^0.9.0",
"tslint": "^3.15.1",
"lodash": "^4.16.1",
"jasmine-core": "~2.5.2",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-htmlfile-reporter": "^0.3.4",
"karma-jasmine": "^1.0.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^3.3.0",
"rimraf": "^2.5.2",
"#types/core-js": "^0.9.34"
},
"repository": {},
"main": "karma-test-shim.js"
}
**
karma.conf.js
**
// #docregion
module.exports = function(config) {
var appBase = 'app/'; // transpiled app JS and map files
var appSrcBase = 'app/'; // app source TS files
var appAssets = 'base/app/'; // component assets fetched by Angular's compiler
var testBase = 'testing/'; // transpiled test JS and map files
var testSrcBase = 'testing/'; // test source TS files
config.set({
basePath: '',
frameworks: ['jasmine'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'), // click "Debug" in browser to see it
require('karma-htmlfile-reporter') // crashing w/ strange socket error
],
customLaunchers: {
// From the CLI. Not used here but interesting
// chrome setup for travis CI using chromium
Chrome_travis_ci: {
base: 'Chrome',
flags: ['--no-sandbox']
}
},
files: [
// System.js for module loading
'node_modules/systemjs/dist/system.src.js',
// Polyfills
'node_modules/core-js/client/shim.js',
'node_modules/reflect-metadata/Reflect.js',
// zone.js
'node_modules/zone.js/dist/zone.js',
'node_modules/zone.js/dist/long-stack-trace-zone.js',
'node_modules/zone.js/dist/proxy.js',
'node_modules/zone.js/dist/sync-test.js',
'node_modules/zone.js/dist/jasmine-patch.js',
'node_modules/zone.js/dist/async-test.js',
'node_modules/zone.js/dist/fake-async-test.js',
// RxJs
{ pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
{ pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
// Paths loaded via module imports:
// Angular itself
{pattern: 'node_modules/#angular/**/*.js', included: false, watched: false},
{pattern: 'node_modules/#angular/**/*.js.map', included: false, watched: false},
{pattern: 'systemjs.config.js', included: false, watched: false},
{pattern: 'systemjs.config.extras.js', included: false, watched: false},
'karma-test-shim.js',
// transpiled application & spec code paths loaded via module imports
{pattern: appBase + '**/*.js', included: false, watched: true},
{pattern: testBase + '**/*.js', included: false, watched: true},
// Asset (HTML & CSS) paths loaded via Angular's component compiler
// (these paths need to be rewritten, see proxies section)
{pattern: appBase + '**/*.html', included: false, watched: true},
{pattern: appBase + '**/*.css', included: false, watched: true},
// Paths for debugging with source maps in dev tools
{pattern: appSrcBase + '**/*.ts', included: false, watched: false},
{pattern: appBase + '**/*.js.map', included: false, watched: false},
{pattern: testSrcBase + '**/*.ts', included: false, watched: false},
{pattern: testBase + '**/*.js.map', included: false, watched: false}
],
// Proxied base paths for loading assets
proxies: {
// required for component assets fetched by Angular's compiler
"/app/": appAssets
},
exclude: [],
preprocessors: {},
// disabled HtmlReporter; suddenly crashing w/ strange socket error
reporters: ['progress', 'kjhtml'],//'html'],
// HtmlReporter configuration
htmlReporter: {
// Open this file to see results in browser
outputFile: '_test-output/tests.html',
// Optional
pageTitle: 'Unit Tests',
subPageTitle: __dirname
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
})
}
**
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/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',
'#angular/upgrade': 'npm:#angular/upgrade/bundles/upgrade.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-google-maps/core': 'npm:angular2-google-maps/core/core.umd.js',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
'angular2-highcharts': 'npm:angular2-highcharts',
'highcharts/highstock.src': 'npm:highcharts/highstock.js',
'highcharts/highcharts-3d': 'npm:highcharts/highcharts-3d.js',
'highcharts': 'npm:highcharts',
'HighchartExporting': 'npm:highcharts/modules/exporting.js',
'HighchartCSVExporting': 'npm:highcharts/modules/export-csv.js',
'angular-2-local-storage': 'npm:angular-2-local-storage',
'angular2-logger': 'npm:angular2-logger',
'ng2-pagination': 'npm:ng2-pagination',
"ng2-modal": "node_modules/ng2-modal",
//'angular2-modal': 'npm:angular2-modal',
//'angular2-modal/plugins/bootstrap': 'npm:angular2-modal/plugins/bootstrap'
},
// 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'
},
'angular2-highcharts': {
main: 'index',
format: 'cjs',
defaultExtension: 'js'
},
'highcharts': {
defaultExtension: 'js',
format: 'cjs'
},
'HighchartExporting': {
defaultExtension: 'js',
format: 'cjs'
},
'HighchartCSVExporting': {
defaultExtension: 'js',
format: 'cjs'
},
'angular-2-local-storage': { main: 'dist/index.js', defaultExtension: 'js' },
'angular2-logger': { main: 'core.js', defaultExtension: 'js' },
'ng2-pagination': {
main: 'index',
format: 'cjs',
defaultExtension: 'js'
},
"ng2-modal": { "main": "index.js", "defaultExtension": "js" },
//'angular2-modal': { defaultExtension: 'js', main: 'bundles/angular2-modal.umd' }
}
});
})(this);
**
app.component.spec.ts
**
/* tslint:disable:no-unused-variable */
import { AppComponent } from './app.component';
import { async, ComponentFixture, TestBed } from '#angular/core/testing';
import { By } from '#angular/platform-browser';
import { DebugElement } from '#angular/core';
//////// SPECS /////////////
describe('AppComponent', function () {
let de: DebugElement;
let deClick: DebugElement;
let comp: AppComponent;
let fixture: ComponentFixture<AppComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AppComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AppComponent);
comp = fixture.componentInstance;
de = fixture.debugElement.query(By.css('h1'));
debugger;
deClick=fixture.debugElement.query(By.css('input'));
});
it('should create component', () => expect(comp).toBeDefined() );
it('should have expected <h2> text', () => {
fixture.detectChanges();
const h1 = de.nativeElement;
expect(h1.innerText).toEqual('Hello Angular');
});
});